loading...
logo
  • 2
    • New Messages
    • avatar-image
      Ernest Kerry
      Can we Meet?
      Just Now New
    • avatar-image
      John
      Dont forgot to call...
      5 minutes ago New
    • avatar-image
      Wilton Zeph
      If there is anything else …
      14/10/2014 1:31 pm
    • avatar-image
      Jenny Kerry
      Let me know when you free
      5 days ago
    • avatar-image
      Tony
      Let me know when you free
      5 days ago
    • View All messages
  • 4
    • You Have 4 Tasks
    • Design some buttons 20%
      20% Complete
    • Create a nice theme 40%
      40% Complete
    • Some task I need to do 60%
      60% Complete
    • Make beautiful transitions 80%
      80% Complete
    • View All Tasks
  • 9
  • 8
    • You have 8 notifications
    • avatar-image
      John Doe
      5 members joined today
      Just now
    • avatar-image
      Tony
      likes a photo of you
      5 min
    • avatar-image
      John
      Dont forgot to call...
      11 min
    • avatar-image
      Jenny Kerry
      Very long description here...
      1 Hour
    • avatar-image
      Ernest Kerry
      2 members joined today
      3 Days
    • View All Notifications
  • User Image
    Natali
    • User Image

      Nataliapery

    • My Profile
    • Account Settings
    • Lock
      Logout
User Image

Nataliapery

  • Dashboard V1
  • Dashboard V2
  • Forms
    • Form Elements
    • Form Editors
    • Form Validations
    • Form Layouts
    • Form Wizards
    • Complex Forms
    • Complex Forms 2
    • Radio and Checkbox
    • Drop Downs
    • Date pickers
    • Advanced Date pickers
  • UI Features
    • General Components
    • Pickers
    • Buttons
    • Tabs & Accordions
    • Font Icons
    • Grid Layout
    • Advanced Modals
    • Grid Stack
    • Tags Input
    • Nestable List
    • Sweet Alert
    • Toastr Notifications
    • Notifications
    • Session Timeout
    • Draggable Portlets
  • UI Components
    • Timeline
    • Transitions
  • DataTables
    • Simple tables
    • Data Tables
    • Advanced Tables
    • Responsive DataTables
    • Bootstrap Tables
  • Charts
    • Flot Charts
    • NVD3 Charts
    • Circle Sliders
    • Chartjs Charts
    • Dimple Charts
    • Amcharts
    • Chartist Charts
  • Calendar
    • Calendar 7
    • Advanced Calendar 6
  • Gallery
    • Masonry Gallery
    • Multiple File Upload
    • Dropify
    • Image Hover
    • Image Filter
    • Image Magnifier
  • Users
    • Users List
    • Add New User
    • View Profile
    • Deleted Users
  • Maps
    • Google Maps
    • Vector Maps
    • Advanced Maps
  • Pages
    • Lockscreen
    • Lockscreen V2
    • Invoice
    • Blank
    • Login
    • Login V2
    • Register
    • Register V2
    • 404 Error
    • 500 Error
  • Layouts
    • Menubar Fold
    • Horizontal Menu
    • Sticky Footer
    • Boxed Layout
    • Fixed Header
    • Boxed & Fixed Header
    • Fixed Header & Menu
  • Menu levels
    • Level 1
      • Level 2
      • Level 2
      • Level 2
        • Level 3
        • Level 3
        • Level 3
          • Level 4
          • Level 4
          • Level 4
            • Level 5
            • Level 5
            • Level 5
        • Level 4
      • Level 2
    • Level 1
    • Level 1
      • Level 2
      • Level 2
      • Level 2

Advanced Modals

  1. Dashboard
  2. UI Features
  3. Advanced Modals

Modal Styles

Basic Modal

Animated Modal Entrances

Modal Header

This is the text in modal

Modal Positions

Position Of Modal

The different modal positions are Top, Center, Bottom and also as a Side-bar

Modal Header

This is the modal at top of the screen

Modal Header

This is the modal at center of the screen

Modal Header

This is the modal at bottom of the screen

Modal Header

This is the text in modal

Additional Modal

Additional Contents of a Modal

Modal Header

Modal 1

Click Next to go to next modal.

Modal 2

This is the second modal

Large Modal

This is a large modal.

Small Modal

This is a small modal.

Modal With Bootstrap Components

Advanced Modal

Modal With Tabs

Tabs in a Modal

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

Tab 1

First Tab

TAB 2

Second Tab

TAB 3

Third Tab

TAB 4

Fourth Tab

Modal with Accordions

Accordion In a Modal

Collapsible Group 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Modal with grid arrangement

col-md-6
col-md-6
col-md-12
col-md-6
col-md-6
col-md-6
col-md-6

Just Me

This modal fills the entire page.

Modal Colors

Color Of Modal

We can set any color to a modal. Here are some examples..

Modal Header

This is the text in modal

Contacts
  • avatar-image Alanis
  • avatar-image Rolando
  • avatar-image Marlee
  • avatar-image Marlee
  • avatar-image Kamryn
  • avatar-image Cielo
  • avatar-image Charlene
Tasks
  • Task 1 40% Complete

    40% Complete (success)
  • Task 2 20% Complete

    20% Complete
  • Task 3 60% Complete

    60% Complete (warning)
  • Task 4 80% Complete

    80% Complete (danger)
Recent Activities
  • New Comment
  • 3 New Followers
  • Message Sent
  • New Task
  • Server Rebooted
  • Server Not Responding
  • New Order Placed
  • Payment Received